<template>
  <div class="pk-input" :class="{'pk-input-sx':size =='sx', 'pk-input-csm':size =='csm', 'pk-input-circle':circle}">
    <el-input v-model="inputtext" :size="size" :placeholder="placeholder" autocomplete="new-password" :="$attrs"  @change="change" style="width: 100%;"/>
  </div>
</template>

<script setup>
  import { defineProps, defineEmits, computed } from "vue"
  import { debounce } from 'lodash-es';
  const emit = defineEmits(['update:modelValue', 'change'])
  const props = defineProps({
    size:{
      type:String,
      default: ''
    },
    circle: {
      type: Boolean,
      default: false
    },
    modelValue:{
      type: String,
      default: ''
    },
    placeholder:{
      type:String,
      default: '请输入'
    }
  })


  const inputtext = computed({
      set(val) {
          emit("update:modelValue", val);
      },
      get() {
          return props.modelValue;
      },
  });

  const change = debounce((e) => {
    emit('update:modelValue', e)
    emit('change', e)
  }, 300) 
  
  
</script>

<style lang="scss" scoped>
.pk-input{
  &-circle{
    border-radius: 40px;
    overflow: hidden;
    border: 1px solid #ccc;
    ::v-deep .el-input--large .el-input__wrapper{
      box-shadow: none!important;
    }
  }
}
</style>